React μ€νΈλ¦¬λ° SSR, μ μ§μ ν₯μ, λΆλΆμ νμ΄λλ μ΄μ μ ν΅ν΄ λ λΉ λ₯Έ μ΄κΈ° νμ΄μ§ λ‘λμ ν₯μλ μ¬μ©μ κ²½νμ μ€ννμΈμ. μ΄ κΈ°μ λ€μ΄ μΉ μ ν리μΌμ΄μ μ±λ₯μ μ΄λ»κ² ν₯μμν€λμ§ μμ보μΈμ.
React μ€νΈλ¦¬λ° SSR: μ΅μ μΉ μ±μ μν μ μ§μ ν₯μ λ° λΆλΆμ νμ΄λλ μ΄μ
μ€λλ λΉ λ₯΄κ² λ³ννλ λμ§νΈ νκ²½μμλ λΉ λ₯΄κ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ μ 곡νλ κ²μ΄ κ°μ₯ μ€μν©λλ€. κ²μ μμ§ μ΅μ ν(SEO)λ μ±λ₯μ μ μ λ μ€μνκ² μ¬κΈ°κ³ μμΌλ©°, μ¬μ©μλ€μ λ‘λ μκ°μ λν κΈ°λμΉκ° λμμ§κ³ μμ΅λλ€. μ ν΅μ μΈ ν΄λΌμ΄μΈνΈ μΈ‘ λ λλ§(CSR)μ JavaScriptκ° λ€μ΄λ‘λ λ° μ€νλλ λμ μ¬μ©μλ€μ΄ λΉ νλ©΄μ μμνκ² λ§λ€ μ μμ΅λλ€. μλ² μΈ‘ λ λλ§(SSR)μ μλ²μμ μ΄κΈ° HTMLμ λ λλ§νμ¬ λ λΉ λ₯Έ μ΄κΈ° νμ΄μ§ λ‘λμ ν₯μλ SEOλ‘ μ΄μ΄μ Έ μλΉν κ°μ μ μ 곡ν©λλ€. React μ€νΈλ¦¬λ° SSRμ μ 체 νμ΄μ§κ° λ λλ§λ λκΉμ§ κΈ°λ€λ¦¬μ§ μκ³ , HTML μ²ν¬κ° μ¬μ© κ°λ₯ν΄μ§λ λλ‘ ν΄λΌμ΄μΈνΈμ μ μ‘ν¨μΌλ‘μ¨ SSRμ ν λ¨κ³ λ λ°μ μν΅λλ€. μ μ§μ ν₯μ(Progressive Enhancement) λ° λΆλΆμ νμ΄λλ μ΄μ (Partial Hydration)κ³Ό κ²°ν©νλ©΄, λ§€μ° μ±λ₯μ΄ λ°μ΄λκ³ μ¬μ©μ μΉνμ μΈ μΉ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
μ€νΈλ¦¬λ° μλ² μ¬μ΄λ λ λλ§(SSR)μ΄λ 무μμΈκ°μ?
κΈ°μ‘΄ SSRμ μ 체 React μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό μλ²μμ λ λλ§ν ν, μμ±λ HTML μλ΅μ ν΄λΌμ΄μΈνΈμ 보λ λλ€. λ°λ©΄μ μ€νΈλ¦¬λ° SSRμ λ λλ§ νλ‘μΈμ€λ₯Ό λ μκ³ κ΄λ¦¬νκΈ° μ¬μ΄ μ²ν¬λ‘ λΆν΄ν©λλ€. κ° μ²ν¬κ° λ λλ§λλ©΄ μ¦μ ν΄λΌμ΄μΈνΈλ‘ μ μ‘λμ΄ λΈλΌμ°μ κ° μ½ν μΈ λ₯Ό μ μ§μ μΌλ‘ νμν μ μκ² ν©λλ€. μ΄λ μ΅μ΄ λ°μ΄νΈκΉμ§μ μκ°(TTFB)μ ν¬κ² μ€μ΄κ³ μ ν리μΌμ΄μ μ μ²΄κ° μ±λ₯μ ν₯μμν΅λλ€.
λ§μΉ λΉλμ€ μ€νΈλ¦Όμ μμ²νλ κ²κ³Ό λΉμ·νλ€κ³ μκ°ν΄λ³΄μΈμ. μ 체 λΉλμ€κ° λ€μ΄λ‘λλ λκΉμ§ κΈ°λ€λ¦¬μ§ μκ³ λ°λ‘ μμ²μ μμν μ μμ΅λλ€. λΈλΌμ°μ λ μ€νΈλ¦¬λ°λλ λλ‘ μ€μκ°μΌλ‘ λΉλμ€λ₯Ό μμ νκ³ νμν©λλ€.
μ€νΈλ¦¬λ° SSRμ μ΄μ :
- λ λΉ λ₯Έ μ΄κΈ° νμ΄μ§ λ‘λ: μ¬μ©μκ° μ½ν μΈ λ₯Ό λ 빨리 λ³΄κ² λμ΄ μ²΄κ° μ§μ° μκ°μ μ€μ΄κ³ μ¬μ©μ κ²½νμ ν₯μμν΅λλ€.
- ν₯μλ SEO: κ²μ μμ§μ΄ μ½ν μΈ λ₯Ό λ λΉ λ₯΄κ² ν¬λ‘€λ§νκ³ μμΈννμ¬ κ²μ μμκ° λμμ§λλ€.
- κ°νλ μ¬μ©μ κ²½ν: μ½ν μΈ μ μ μ§μ μΈ νμλ μ¬μ©μμ μ°Έμ¬λ₯Ό μ λνκ³ μ’μ κ°μ μ€μ λλ€.
- λ λμ 리μμ€ νμ©: μλ²λ 첫 λ²μ§Έ λ°μ΄νΈλ₯Ό 보λ΄κΈ° μν΄ μ 체 νμ΄μ§κ° λ λλ§λ λκΉμ§ κΈ°λ€λ¦΄ νμκ° μμΌλ―λ‘ λ λ§μ μμ²μ λμμ μ²λ¦¬ν μ μμ΅λλ€.
μ μ§μ ν₯μ(Progressive Enhancement): μ κ·Όμ± λ° λ³΅μλ ₯μ κΈ°λ°
μ μ§μ ν₯μ(Progressive Enhancement)μ λΈλΌμ°μ κΈ°λ₯μ΄λ λ€νΈμν¬ μ‘°κ±΄μ κ΄κ³μμ΄ λͺ¨λ μ¬μ©μκ° μ ν리μΌμ΄μ μ μ κ·Όν μ μλλ‘ ν΅μ¬ μ½ν μΈ μ κΈ°λ₯μ μ°μ μμλ₯Ό λλ μΉ κ°λ° μ λ΅μ λλ€. μ΄λ μλ―Έλ‘ μ HTMLμ κ²¬κ³ ν κΈ°λ°μμ μμνμ¬, μ€νμΌλ§μ μν CSSμ μνΈμμ©μ μν JavaScriptλ‘ ν₯μλ©λλ€.
React μ€νΈλ¦¬λ° SSRμ λ§₯λ½μμ, μ μ§μ ν₯μμ React μ ν리μΌμ΄μ μ΄ μμ ν νμ΄λλ μ΄μ (μ¦, JavaScriptκ° νμ΄μ§λ₯Ό μ₯μ νκ³ μνΈμμ© κ°λ₯νκ² λ§λ μν)λκΈ° μ μλ μμ ν κΈ°λ₯νλ HTML ꡬ쑰λ₯Ό μ 곡νλ κ²μ μλ―Έν©λλ€. μ΄λ ꡬν λΈλΌμ°μ λ₯Ό μ¬μ©νκ±°λ JavaScriptκ° λΉνμ±νλ μ¬μ©μλ ν΅μ¬ μ½ν μΈ μ μ κ·Όν μ μλλ‘ λ³΄μ₯ν©λλ€.
μ μ§μ ν₯μμ ν΅μ¬ μμΉ:
- μλ―Έλ‘ μ HTMLλ‘ μμ: νμ΄μ§μ μ½ν μΈ μ ꡬ쑰λ₯Ό μ ννκ² μ€λͺ νλ HTML μμλ₯Ό μ¬μ©νμΈμ.
- μ€νμΌλ§μ μν CSS μΆκ°: CSSλ‘ νμ΄μ§μ μκ°μ λͺ¨μμ ν₯μμν€λ©΄μ, μ€νμΌλ§ μμ΄λ μ½ν μΈ κ° μ¬μ ν μ½κΈ° κ°λ₯νκ³ μ κ·Ό κ°λ₯νλλ‘ λ³΄μ₯ν©λλ€.
- JavaScriptλ‘ ν₯μ: JavaScriptλ‘ μνΈμμ© λ° λμ λμμ μΆκ°νλ©°, JavaScript μμ΄λ ν΅μ¬ κΈ°λ₯μ΄ μ κ·Ό κ°λ₯νλλ‘ λ³΄μ₯ν©λλ€.
- λ€μν μ₯μΉ λ° λΈλΌμ°μ μμ ν μ€νΈ: μ ν리μΌμ΄μ μ΄ λ€μν μ₯μΉ, λΈλΌμ°μ λ° λ€νΈμν¬ μ‘°κ±΄μμ μ μλνλμ§ νμΈν©λλ€.
μ μ§μ ν₯μμ μμ:
λ΄μ€λ ν° κ΅¬λ μ μν κ°λ¨ν μμμ μκ°ν΄ 보μΈμ. μ μ§μ ν₯μμ ν΅ν΄ μ΄ μμμ νμ€ HTML μμ μμλ₯Ό μ¬μ©νμ¬ κ΅¬μΆλ κ²μ λλ€. JavaScriptκ° λΉνμ±νλμ΄ μλλΌλ μ¬μ©μλ μμμ μμ±νκ³ μ μΆν μ μμ΅λλ€. κ·Έλ¬λ©΄ μλ²κ° μμ λ°μ΄ν°λ₯Ό μ²λ¦¬νκ³ νμΈ μ΄λ©μΌμ λ³΄λΌ μ μμ΅λλ€. JavaScriptκ° νμ±νλλ©΄ μμμ ν΄λΌμ΄μΈνΈ μΈ‘ μ ν¨μ± κ²μ¬, μλ μμ± λ° κΈ°ν μνΈμμ© κΈ°λ₯μΌλ‘ ν₯μλ μ μμ΅λλ€.
λΆλΆμ νμ΄λλ μ΄μ (Partial Hydration): Reactμ ν΄λΌμ΄μΈνΈ μΈ‘ μΈμ μ΅μ ν
νμ΄λλ μ΄μ (Hydration)μ ν΄λΌμ΄μΈνΈ μΈ‘μμ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νκ³ React μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό μνΈμμ© κ°λ₯νκ² λ§λλ νλ‘μΈμ€μ λλ€. μ ν΅μ μΈ SSRμμλ λͺ¨λ μ»΄ν¬λνΈκ° ν΄λΌμ΄μΈνΈ μΈ‘ μνΈμμ©μ νμλ‘ νλμ§ μ¬λΆμ κ΄κ³μμ΄ μ 체 React μ»΄ν¬λνΈ νΈλ¦¬κ° νμ΄λλ μ΄μ λ©λλ€. μ΄λ νΉν ν¬κ³ 볡μ‘ν μ ν리μΌμ΄μ μ κ²½μ° λΉν¨μ¨μ μΌ μ μμ΅λλ€.
λΆλΆμ νμ΄λλ μ΄μ μ ν΄λΌμ΄μΈνΈ μΈ‘ μνΈμμ©μ΄ νμν μ»΄ν¬λνΈλ§ μ νμ μΌλ‘ νμ΄λλ μ΄μ ν μ μκ² ν΄μ€λλ€. μ΄λ λ€μ΄λ‘λ λ° μ€νν΄μΌ νλ JavaScript μμ ν¬κ² μ€μ¬, λ λΉ λ₯Έ μνΈμμ© μκ°(TTI)κ³Ό μ λ°μ μΈ μ±λ₯ ν₯μμΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€.
λΈλ‘κ·Έ κ²μλ¬Όκ³Ό λκΈ μΉμ μ΄ μλ μΉμ¬μ΄νΈλ₯Ό μμν΄ λ³΄μΈμ. λΈλ‘κ·Έ κ²μλ¬Ό μ체λ λλΆλΆ μ μ μ½ν μΈ μΌ μ μμ§λ§, λκΈ μΉμ μ μ λκΈ μ μΆ, μ°¬μ± λ° λ°λ ν¬νλ₯Ό μν ν΄λΌμ΄μΈνΈ μΈ‘ μνΈμμ©μ΄ νμν©λλ€. λΆλΆμ νμ΄λλ μ΄μ μ μ¬μ©νλ©΄ λκΈ μΉμ λ§ νμ΄λλ μ΄μ νκ³ λΈλ‘κ·Έ κ²μλ¬Όμ νμ΄λλ μ΄μ λμ§ μμ μνλ‘ λ μ μμ΅λλ€. μ΄λ κ² νλ©΄ νμ΄μ§λ₯Ό μνΈμμ© κ°λ₯νκ² λ§λλ λ° νμν JavaScript μμ΄ μ€μ΄λ€μ΄ λ λΉ λ₯Έ TTIλ₯Ό λ¬μ±ν μ μμ΅λλ€.
λΆλΆμ νμ΄λλ μ΄μ μ μ΄μ :
- JavaScript λ€μ΄λ‘λ ν¬κΈ° κ°μ: νμν μ»΄ν¬λνΈλ§ νμ΄λλ μ΄μ λμ΄ λ€μ΄λ‘λν΄μΌ νλ JavaScript μμ μ΅μνν©λλ€.
- λ λΉ λ₯Έ μνΈμμ© μκ°(TTI): μ ν리μΌμ΄μ μ΄ λ 빨리 μνΈμμ© κ°λ₯ν΄μ Έ μ¬μ©μ κ²½νμ ν₯μμν΅λλ€.
- ν₯μλ μ±λ₯: ν΄λΌμ΄μΈνΈ μΈ‘ μ€λ²ν€λ κ°μλ λ λΆλλ½κ³ λ°μμ±μ΄ λ°μ΄λ μνΈμμ©μΌλ‘ μ΄μ΄μ§λλ€.
λΆλΆμ νμ΄λλ μ΄μ ꡬν:
λΆλΆμ νμ΄λλ μ΄μ ꡬνμ 볡μ‘ν μ μμΌλ©° μ μ€ν κ³νμ΄ νμν©λλ€. λ€μμ ν¬ν¨ν μ¬λ¬ μ κ·Ό λ°©μμ΄ μ¬μ©λ μ μμ΅λλ€:
- Reactμ `lazy` λ° `Suspense` μ¬μ©: μ΄ κΈ°λ₯λ€μ ν΅ν΄ μ»΄ν¬λνΈμ λ‘λ λ° νμ΄λλ μ΄μ μ νμν λκΉμ§ μ§μ°μν¬ μ μμ΅λλ€.
- μ‘°κ±΄λΆ νμ΄λλ μ΄μ : μ¬μ©μκ° μ»΄ν¬λνΈμ μνΈμμ©νμ§ μ¬λΆμ κ°μ νΉμ 쑰건μ λ°λΌ μ»΄ν¬λνΈλ₯Ό νμ΄λλ μ΄μ νκΈ° μν΄ μ‘°κ±΄λΆ λ λλ§μ μ¬μ©ν©λλ€.
- μλνν° λΌμ΄λΈλ¬λ¦¬: `react-activation` λλ `island-components`μ κ°μ μ¬λ¬ λΌμ΄λΈλ¬λ¦¬κ° λΆλΆμ νμ΄λλ μ΄μ μ λ μ½κ² ꡬννλ λ° λμμ μ€ μ μμ΅λλ€.
λͺ¨λ μ’ ν©νκΈ°: μ€μ μμ
μ νμ 보μ¬μ£Όλ κ°μμ μ μμκ±°λ μΉμ¬μ΄νΈλ₯Ό μκ°ν΄ λ΄ μλ€. μ°λ¦¬λ μ€νΈλ¦¬λ° SSR, μ μ§μ ν₯μ, λΆλΆμ νμ΄λλ μ΄μ μ νμ©νμ¬ λΉ λ₯΄κ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ λ§λ€ μ μμ΅λλ€.
- μ€νΈλ¦¬λ° SSR: μλ²λ μ ν λͺ©λ‘ νμ΄μ§μ HTMLμ μ¬μ© κ°λ₯ν΄μ§λ λλ‘ ν΄λΌμ΄μΈνΈμ μ€νΈλ¦¬λ°ν©λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μλ μ 체 νμ΄μ§κ° λ λλ§λκΈ° μ μλ μ ν μ΄λ―Έμ§μ μ€λͺ μ λΉ λ₯΄κ² λ³Ό μ μμ΅λλ€.
- μ μ§μ ν₯μ: μ ν λͺ©λ‘μ μλ―Έλ‘ μ HTMLλ‘ κ΅¬μΆλμ΄, μ¬μ©μκ° JavaScript μμ΄λ μ νμ νμν μ μλλ‘ λ³΄μ₯ν©λλ€. CSSλ λͺ©λ‘μ μ€νμΌλ§νκ³ μκ°μ μΌλ‘ λ§€λ ₯μ μΌλ‘ λ§λλ λ° μ¬μ©λ©λλ€.
- λΆλΆμ νμ΄λλ μ΄μ : \"μ₯λ°κ΅¬λμ μΆκ°\" λ²νΌ λ° μ ν νν°λ§ μ΅μ κ³Ό κ°μ΄ ν΄λΌμ΄μΈνΈ μΈ‘ μνΈμμ©μ΄ νμν μ»΄ν¬λνΈλ§ νμ΄λλ μ΄μ λ©λλ€. μ μ μ ν μ€λͺ λ° μ΄λ―Έμ§λ νμ΄λλ μ΄μ λμ§ μμ μνλ‘ μ μ§λ©λλ€.
μ΄λ¬ν κΈ°μ λ€μ κ²°ν©ν¨μΌλ‘μ¨ μ°λ¦¬λ λΉ λ₯΄κ² λ‘λλκ³ , λͺ¨λ μ¬μ©μκ° μ κ·Όν μ μμΌλ©°, λΆλλ½κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡νλ μ μμκ±°λ μΉμ¬μ΄νΈλ₯Ό λ§λ€ μ μμ΅λλ€.
μ½λ μμ (κ°λ μ )
μ΄κ²μ μ€νΈλ¦¬λ° SSRμ μμ΄λμ΄λ₯Ό μ€λͺ νκΈ° μν λ¨μνλ κ°λ μ μμμ λλ€. μ€μ ꡬνμ Express λλ Next.jsμ κ°μ μλ² νλ μμν¬λ₯Ό μ¬μ©ν λ 볡μ‘ν μ€μ μ΄ νμν©λλ€.
μλ² μΈ‘ (Node.js λ° React):
import React from 'react';
import { renderToPipeableStream } from 'react-dom/server';
import express from 'express';
const app = express();
function App() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
);
}
function Header() {
return <h1>My Awesome Website</h1>;
}
function MainContent() {
return <p>This is the main content of the page.</p>;
}
function Footer() {
return <p>© 2023 My Website</p>;
}
app.get('/', (req, res) => {
const { pipe, abort } = renderToPipeableStream(
<App />,
{
bootstrapScriptContent: '',
bootstrapScripts: ['/static/client.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(err) {
console.error(err);
}
}
);
});
app.use('/static', express.static('public'));
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
ν΄λΌμ΄μΈνΈ μΈ‘ (public/client.js):
// μ΄λ ν΄λΌμ΄μΈνΈ μΈ‘ JavaScriptλ₯Ό μν νλ μ΄μ€νλμ
λλ€.
// μ€μ μ ν리μΌμ΄μ
μμλ React μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό νμ΄λλ μ΄μ
νλ μ½λκ° ν¬ν¨λ κ²μ
λλ€.
console.log('Client-side JavaScript loaded.');
μ€λͺ :
- μλ² μΈ‘ μ½λλ `renderToPipeableStream`μ μ¬μ©νμ¬ React μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό μ€νΈλ¦ΌμΌλ‘ λ λλ§ν©λλ€.
- `onShellReady` μ½λ°±μ μ ν리μΌμ΄μ μ μ΄κΈ° μ Έμ΄ ν΄λΌμ΄μΈνΈλ‘ μ μ‘λ μ€λΉκ° λμμ λ νΈμΆλ©λλ€.
- `pipe` ν¨μλ HTML μ€νΈλ¦Όμ μλ΅ κ°μ²΄λ‘ νμ΄νν©λλ€.
- ν΄λΌμ΄μΈνΈ μΈ‘ JavaScriptλ HTMLμ΄ λ λλ§λ νμ λ‘λλ©λλ€.
μ°Έκ³ : μ΄ μμλ λ§€μ° κΈ°λ³Έμ μΈ κ²μ΄λ©° μ€λ₯ μ²λ¦¬, λ°μ΄ν° κ°μ Έμ€κΈ° λλ κΈ°ν κ³ κΈ κΈ°λ₯μ ν¬ν¨νμ§ μμ΅λλ€. νλ‘λμ μ€λΉκ° λ ꡬνμ μν΄μλ 곡μ React λ¬Έμ λ° μλ² νλ μμν¬ λ¬Έμλ₯Ό μ°Έμ‘°νμΈμ.
λμ κ³Όμ λ° κ³ λ € μ¬ν
μ€νΈλ¦¬λ° SSR, μ μ§μ ν₯μ λ° λΆλΆμ νμ΄λλ μ΄μ μ μλΉν μ΄μ μ μ 곡νμ§λ§, λͺ κ°μ§ λμ κ³Όμ λ λλ°ν©λλ€:
- 볡μ‘μ± μ¦κ°: μ΄λ¬ν κΈ°μ μ ꡬννλ €λ©΄ React λ° μλ² μ¬μ΄λ λ λλ§μ λν λ κΉμ μ΄ν΄κ° νμν©λλ€.
- λλ²κΉ : SSR λ° νμ΄λλ μ΄μ κ³Ό κ΄λ ¨λ λ¬Έμ λ₯Ό λλ²κΉ νλ κ²μ ν΄λΌμ΄μΈνΈ μΈ‘ μ½λ λλ²κΉ λ³΄λ€ λ μ΄λ €μΈ μ μμ΅λλ€.
- λ°μ΄ν° κ°μ Έμ€κΈ°: SSR νκ²½μμ λ°μ΄ν° κ°μ Έμ€κΈ°λ₯Ό κ΄λ¦¬νλ €λ©΄ μ μ€ν κ³νκ³Ό μ€νμ΄ νμν©λλ€. μλ²μμ λ°μ΄ν°λ₯Ό 미리 κ°μ Έμ ν΄λΌμ΄μΈνΈλ‘ μ§λ ¬νν΄μΌ ν μλ μμ΅λλ€.
- μλνν° λΌμ΄λΈλ¬λ¦¬: μΌλΆ μλνν° λΌμ΄λΈλ¬λ¦¬λ SSR λλ νμ΄λλ μ΄μ κ³Ό μμ ν νΈνλμ§ μμ μ μμ΅λλ€.
- SEO κ³ λ € μ¬ν: Google λ° κΈ°ν κ²μ μμ§μ΄ μ€νΈλ¦¬λ°λ μ½ν μΈ λ₯Ό μ¬λ°λ₯΄κ² λ λλ§νκ³ μμΈνν μ μλλ‘ λ³΄μ₯νμΈμ. Google Search Consoleλ‘ ν μ€νΈνμΈμ.
- μ κ·Όμ±: WCAG νμ€μ μ€μνκΈ° μν΄ νμ μ κ·Όμ±μ μ°μ μνμΈμ.
λꡬ λ° λΌμ΄λΈλ¬λ¦¬
React μ ν리μΌμ΄μ μμ μ€νΈλ¦¬λ° SSR, μ μ§μ ν₯μ λ° λΆλΆμ νμ΄λλ μ΄μ μ ꡬννλ λ° λμμ΄ λλ λͺ κ°μ§ λꡬμ λΌμ΄λΈλ¬λ¦¬κ° μμ΅λλ€:
- Next.js: SSR, λΌμ°ν λ° κΈ°ν κΈ°λ₯μ κΈ°λ³ΈμΌλ‘ μ§μνλ μΈκΈ° μλ React νλ μμν¬μ λλ€.
- Gatsby: React λ° GraphQLμ μ¬μ©νμ¬ κ³ μ±λ₯ μΉμ¬μ΄νΈλ₯Ό ꡬμΆνλ μ μ μ¬μ΄νΈ μμ±κΈ°μ λλ€.
- Remix: μΉ νμ€μ μμ©νκ³ μ μ§μ ν₯μ μ κ·Ό λ°©μμ μ 곡νλ νμ€ν μΉ νλ μμν¬μ λλ€.
- React Loadable: React μ»΄ν¬λνΈμ μ½λ λΆν λ° μ§μ° λ‘λλ₯Ό μν λΌμ΄λΈλ¬λ¦¬μ λλ€.
- React Helmet: React μ ν리μΌμ΄μ μμ λ¬Έμ ν€λ λ©νλ°μ΄ν°λ₯Ό κ΄λ¦¬νκΈ° μν λΌμ΄λΈλ¬λ¦¬μ λλ€.
κΈλ‘λ² μν₯ λ° κ³ λ € μ¬ν
κΈλ‘λ² μ¬μ©μλ₯Ό μν μΉ μ ν리μΌμ΄μ μ κ°λ°ν λλ λ€μ μ¬νλ€μ κ³ λ €νλ κ²μ΄ μ€μν©λλ€:
- νμ§ν (l10n): μ ν리μΌμ΄μ μ μ½ν μΈ μ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό λ€λ₯Έ μΈμ΄μ μ§μμ λ§κ² μ‘°μ ν©λλ€.
- κ΅μ ν (i18n): μ ν리μΌμ΄μ μ΄ λ€λ₯Έ μΈμ΄μ μ§μμ μ½κ² μ μ©λ μ μλλ‘ μ€κ³ν©λλ€. μ μ ν λ μ§, μκ° λ° μ«μ νμμ μ¬μ©ν©λλ€.
- μ κ·Όμ± (a11y): μ¬μ©μμ μμΉμ κ΄κ³μμ΄ μ₯μ κ° μλ μ¬μ©μλ μ ν리μΌμ΄μ μ μ κ·Όν μ μλλ‘ λ³΄μ₯ν©λλ€. WCAG μ§μΉ¨μ μ€μν©λλ€.
- λ€νΈμν¬ μ‘°κ±΄: λ리거λ λΆμμ ν μΈν°λ· μ°κ²°μ κ°μ§ μ¬μ©μλ₯Ό μν΄ μ ν리μΌμ΄μ μ μ΅μ νν©λλ€. μ μΈκ³ μ¬μ©μμκ² λ κ°κΉμ΄ κ³³μ μ μ μμ°μ μΊμνκΈ° μν΄ CDN(μ½ν μΈ μ μ‘ λ€νΈμν¬) μ¬μ©μ κ³ λ €ν©λλ€.
- λ¬Ένμ λ―Όκ°μ±: λ¬Ένμ μ°¨μ΄λ₯Ό μΌλμ λκ³ νΉμ μ§μμμ λΆμΎνκ±°λ λΆμ μ ν μ μλ μ½ν μΈ μ¬μ©μ νΌν©λλ€. μλ₯Ό λ€μ΄, μ΄λ―Έμ§μ μμ μ νμ λ¬Ένλ§λ€ λ€λ₯Έ μλ―Έλ₯Ό κ°μ§ μ μμ΅λλ€.
- λ°μ΄ν° νλΌμ΄λ²μ λ° κ·μ μ€μ: GDPR(μ λ½), CCPA(μΊλ¦¬ν¬λμ) λ± λ€μν κ΅κ°μ λ°μ΄ν° νλΌμ΄λ²μ κ·μ μ μ΄ν΄νκ³ μ€μν©λλ€.
- μκ°λ: λ€λ₯Έ μ§μμ μ¬μ©μλ₯Ό μν΄ μκ°λλ₯Ό μ μ ν μ²λ¦¬νκ³ νμν©λλ€.
- ν΅ν: κ° μ¬μ©μμ λν΄ μ μ ν ν΅νλ‘ κ°κ²©μ νμν©λλ€.
μ΄λ¬ν κΈλ‘λ² μν₯μ μ μ€νκ² κ³ λ €ν¨μΌλ‘μ¨ μ μΈκ³ μ¬μ©μμκ² μ κ·Ό κ°λ₯νκ³ λ§€λ ₯μ μ΄λ©° κ΄λ ¨μ± μλ μΉ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
κ²°λ‘
React μ€νΈλ¦¬λ° SSR, μ μ§μ ν₯μ, λΆλΆμ νμ΄λλ μ΄μ μ μΉ μ ν리μΌμ΄μ μ μ±λ₯κ³Ό μ¬μ©μ κ²½νμ ν¬κ² ν₯μμν¬ μ μλ κ°λ ₯ν κΈ°μ μ λλ€. μ½ν μΈ λ₯Ό λ λΉ λ₯΄κ² μ 곡νκ³ , μ κ·Όμ±μ 보μ₯νλ©°, ν΄λΌμ΄μΈνΈ μΈ‘ νμ΄λλ μ΄μ μ μ΅μ νν¨μΌλ‘μ¨ μ±λ₯μ΄ λ°μ΄λκ³ μ¬μ©μ μΉνμ μΈ μΉμ¬μ΄νΈλ₯Ό λ§λ€ μ μμ΅λλ€. μ΄λ¬ν κΈ°μ λ€μ΄ μΌλΆ λμ κ³Όμ λ₯Ό μλ°νμ§λ§, νΉν κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ νλ μ ν리μΌμ΄μ μ κ²½μ° μ 곡νλ μ΄μ μ΄ λ Έλ ₯μ κΈ°μΈμΌ κ°μΉκ° μκ² λ§λλλ€. μ΄λ¬ν μ λ΅μ μμ©νλ κ²μ μ¬μ©μ κ²½νκ³Ό κ²μ μμ§ μ΅μ νκ° κ°μ₯ μ€μν κ²½μμ μΈ κΈλ‘λ² μμ₯μμ μΉ μ ν리μΌμ΄μ μ μ±κ³΅μ μν λ°νμ λ§λ ¨ν©λλ€. μ μΈκ³ μ¬μ©μμκ² μ ν리μΌμ΄μ μ΄ λλ¬νκ³ κΈ°μ¨μ μ€ μ μλλ‘ μ κ·Όμ±κ³Ό κ΅μ νλ₯Ό μ°μ μνλ κ²μ μμ§ λ§μΈμ.